import React, { useState } from 'react'; // 导入React和useState
import { Table, Button, Modal, Form, Input, Space, message, Popconfirm, Card } from 'antd'; // 导入Ant Design组件
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'; // 导入图标

// 初始职位数据
const initialPositions = [
  { id: 1, name: '前端开发', description: '负责前端页面开发' },
  { id: 2, name: '后端开发', description: '负责后端接口开发' },
  { id: 3, name: '产品经理', description: '负责产品需求管理' }
];

const PositionManagement = () => {
  // 职位列表
  const [positions, setPositions] = useState(initialPositions);
  // 控制模态框显示
  const [modalVisible, setModalVisible] = useState(false);
  // 当前编辑职位
  const [editing, setEditing] = useState(null);
  // 表单实例
  const [form] = Form.useForm();

  // 打开新增职位模态框
  const handleAdd = () => {
    setEditing(null);
    form.resetFields();
    setModalVisible(true);
  };

  // 打开编辑职位模态框
  const handleEdit = (record) => {
    setEditing(record);
    form.setFieldsValue(record);
    setModalVisible(true);
  };

  // 删除职位
  const handleDelete = (id) => {
    setPositions(positions.filter(item => item.id !== id));
    message.success('删除成功');
  };

  // 提交表单
  const handleOk = () => {
    form.validateFields().then(values => {
      if (editing) {
        // 编辑职位
        setPositions(positions.map(item => item.id === editing.id ? { ...item, ...values } : item));
        message.success('编辑成功');
      } else {
        // 新增职位
        const newItem = { id: Date.now(), ...values };
        setPositions([...positions, newItem]);
        message.success('新增成功');
      }
      setModalVisible(false);
      form.resetFields();
    });
  };

  // 职位表格列
  const columns = [
    { title: '职位名称', dataIndex: 'name', key: 'name' },
    { title: '职位描述', dataIndex: 'description', key: 'description' },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space>
          <Button icon={<EditOutlined />} size="small" onClick={() => handleEdit(record)}>编辑</Button>
          <Popconfirm title="确定删除该职位吗？" onConfirm={() => handleDelete(record.id)} okText="确定" cancelText="取消">
            <Button icon={<DeleteOutlined />} size="small" danger>删除</Button>
          </Popconfirm>
        </Space>
      )
    }
  ];

  return (
    <Card title="职位管理" bordered={false}> {/* 外层卡片 */}
      <Button type="primary" icon={<PlusOutlined />} style={{ marginBottom: 16 }} onClick={handleAdd}>新增职位</Button>
      <Table columns={columns} dataSource={positions} rowKey="id" pagination={false} />
      <Modal
        title={editing ? '编辑职位' : '新增职位'}
        open={modalVisible}
        onOk={handleOk}
        onCancel={() => setModalVisible(false)}
        destroyOnClose
      >
        <Form form={form} layout="vertical">
          <Form.Item name="name" label="职位名称" rules={[{ required: true, message: '请输入职位名称' }]}> 
            <Input placeholder="请输入职位名称" />
          </Form.Item>
          <Form.Item name="description" label="职位描述" rules={[{ required: true, message: '请输入职位描述' }]}> 
            <Input placeholder="请输入职位描述" />
          </Form.Item>
        </Form>
      </Modal>
    </Card>
  );
};

export default PositionManagement; // 导出职位管理组件 